<template>
	<view class="register">

		<view class="topBox">
			<image class="topimg" src="@/static/image/logintop.png" mode="" />
			<view class="contentBox">
				<view class="navBar">
					<u-icon name="arrow-left" color="#ffffff" @click="handleBack"></u-icon>
				</view>
				<view class="title">
					注册
				</view>
			</view>
		</view>


		<view class="inputContent">

			<view class="inputbox">
				<image src="../../static/image/phone.png" mode=""
					style="width: 44rpx;height: 50rpx;margin-right: 70rpx;" />
				<input type="number" v-model="username" name="" id="" placeholder="请输入您的电话">
			</view>

			<view class="inputbox">
				<image src="../../static/image/yzm.png" mode=""
					style="width: 44rpx;height: 50rpx;margin-right: 70rpx;" />
				<input type="number" v-model="code" name="" id="" placeholder="请输入验证码">
				<view v-if="codeFlag" class="yamtext" @click="handleSendcode">
					发送验证码
				</view>
				<view v-else class="yamnum">
					{{time}}s
				</view>
			</view>

			<view class="inputbox">
				<image src="../../static/image/password.png" mode=""
					style="width: 40rpx;height: 46rpx;margin-right: 70rpx;" />
				<input type="password" v-model="password" name="" id="" placeholder="请输入您的密码">
			</view>

			<view class="inputbox">
				<image src="../../static/image/ys.png" mode=""
					style="width: 26rpx;height: 52rpx;margin-right: 70rpx;" />
				<input type="password" v-model="password1" name="" id="" placeholder="请确认您的密码">
			</view>

			<view class="inputbox">
				<image src="../../static/image/yqm.png" mode=""
					style="width: 40rpx;height: 46rpx;margin-right: 70rpx;" />
				<input type="text" v-model="invite_code" name="" id="" placeholder="请输入邀请码">
			</view>

		</view>


		<view class="xieyi">
			<!-- <u-checkbox-group @change="handleCheck">
				<u-checkbox v-model="checked" shape="square" active-color="#359691"></u-checkbox>
			</u-checkbox-group> -->
			<view class="" style="width: 30rpx;height: 30rpx;" @click="handleCheck">
				<image v-if="checked" src="../../static/image/ked.png" mode="" style="width: 30rpx;height:30rpx;" />
				<image v-else src="../../static/image/kong.png" mode="" style="width: 30rpx;height: 30rpx;" />

			</view>
			<view class="">
				<text @click="handleCheck">已阅读并同意</text> <text @click="handleUser" style="color:#359691 ;">《用户协议》</text>
				<text @click="handleYinsi" style="color:#359691 ;">《隐私协议》</text>条款
			</view>

		</view>

		<view class="btn btns">
			<view class="inner" @click="$u.debounce(handleregister, 1000)">
				<view class="" style="margin-right: 40rpx;">
					注册登录
				</view>
				<u-icon name="arrow-rightward" size="20" color="#ffffff"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		sendsms,
		register
	} from "@/api/api.js"
	export default {
		data() {
			return {
				checked: false,
				username: "", //手机号
				code: "", //验证码
				password: "", //密码
				password1: "", //确认密码
				invite_code: "", //邀请码
				codeFlag: true,
				time: 60,
				setInterval: null
			}
		},
		onLoad() {
			uni.setStorageSync('userxieyi', false)
			uni.setStorageSync('yinsixieyi', false)
		},
		onShow() {
			// if(uni.getStorageSync('userxieyi') && uni.getStorageSync('yinsixieyi')){
			// 	this.checked = true
			// }
		},
		methods: {
			async handleSendcode() {
				const that = this
				if (that.username == "") {
					uni.showToast({
						title: '请输入手机号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let res = await sendsms({
					username: that.username
				})
				console.log("验证码", res)
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
					// uni.showToast({
					// 	title: '验证码' + res.data,
					// 	icon: "none",
					// 	duration: 5000
					// });
					that.codeFlag = false
					const interval = setInterval(function() {
						if ((that.time--) <= 0) {
							that.time = 60
							that.codeFlag = true
							clearInterval(interval)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

			},
			async handleregister() {
				if (this.password == "") {
					uni.showToast({
						title: '请输入密码！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.password1 == "") {
					uni.showToast({
						title: '请输入确认密码！',
						icon: "none",
						duration: 2000
					});
					return
				}

				if (this.checked == false) {
					uni.showToast({
						title: '请先同意《用户协议》和《隐私协议》！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let data = {
					username: this.username,
					code: this.code,
					password: this.password,
					password1: this.password1,
					invite_code: this.invite_code
				}
				let res = await register(data)
				console.log("注册", res)
				if (res.code == 1000) {
					uni.showToast({
						title: "注册成功",
						icon: "none",
						duration: 1500
					});
					uni.setStorageSync("token", res.data.token)
					uni.setStorageSync("userData", res.data)
					setTimeout(() => {
						uni.reLaunch({
							url: "../home/index"
						})
					}, 2000)

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

			},
			handleCheck() {
				console.log("check", this.checked)
				if (this.checked == false) {
					if (!uni.getStorageSync('userxieyi')) {
						uni.showToast({
							title: "请先阅读用户协议！",
							icon: "none",
							duration: 1500
						});
						this.checked = false
						return
					}
					if (!uni.getStorageSync('yinsixieyi')) {
						uni.showToast({
							title: "请先阅读隐私协议！",
							icon: "none",
							duration: 1500
						});
						this.checked = false
						return
					}
				}

				this.checked = !this.checked
				console.log("this", this.checked)
			},
			handleUser() {
				uni.navigateTo({
					url: "./userXieyi"
				})
			},
			handleYinsi() {
				uni.navigateTo({
					url: "./yinsiXieyi"
				})
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.register {
		.topBox {
			width: 100%;
			height: 358rpx;
			position: relative;

			.topimg {
				width: 100%;
				height: 100%;
			}

			.contentBox {
				width: 100%;
				height: 100rpx;
				position: absolute;
				top: 120rpx;

				.navBar {
					display: flex;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					padding: 0 30rpx;
					display: flex;
					align-content: center;
					justify-content: space-between;
				}


				.title {
					width: 100%;
					text-align: center;
					font-size: 80rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}



		.inputContent {
			margin-top: 28rpx;

			.inputbox {
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				display: flex;
				align-items: center;
				padding: 24rpx 78rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-bottom: 34rpx;

				.yamtext {
					width: 112rpx;
					height: 32rpx;
					background: #359691;
					border-radius: 212rpx 212rpx 212rpx 212rpx;
					opacity: 1;
					font-size: 16rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 32rpx;
					text-align: center;
				}

				.yamnum {
					color: #359691;
				}

			}
		}

		.xieyi {
			width: 520rpx;
			margin-left: 68rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #948F8E;
			line-height: 28rpx;
			margin-top: 118rpx;
			display: flex;
			align-items: center;
		}

		.btn {
			width: 622rpx;
			height: 76rpx;
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			opacity: 1;
			border: 2rpx solid #359691;
			margin: 0 auto;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #359691;
			line-height: 76rpx;
			text-align: center;
			display: flex;
			margin-top: 32rpx;

			.inner {
				width: 224rpx;
				display: flex;
				margin: 0 auto;
			}
		}

		.btns {
			background: #359691;
			color: #ffffff;
			margin-bottom: 36rpx;
		}

	}
</style>